<template>
  <div class="simple-flow-canvas">
    <div class="simple-flow-container">
      <div class="top-area-container">
        <div class="top-actions">
          <div class="canvas-control">
            <span class="control-scale-group">
              <span class="control-scale-button"> <Icon icon="ep:plus" @click="zoomOut()" /></span>
              <span class="control-scale-label">{{ scaleValue }}%</span>
              <span class="control-scale-button"><Icon icon="ep:minus" @click="zoomIn()" /></span>
            </span>
          </div>
          <!--          <el-button type="primary" @click="saveSimpleFlowModel">保存</el-button>-->
          <!--           <el-button type="primary">全局设置</el-button>-->
        </div>
      </div>
      <div class="scale-container" :style="`transform: scale(${scaleValue / 100});`">
        <ProcessNodeTree v-if="processNodeTree" v-model:flow-node="processNodeTree" />
      </div>
    </div>
    <Dialog v-model="errorDialogVisible" title="保存失败" width="400" :fullscreen="false">
      <div class="mb-2">以下节点内容不完善，请修改后保存</div>
      <div
        class="mb-3 b-rounded-1 bg-gray-100 p-2 line-height-normal"
        v-for="(item, index) in errorNodes"
        :key="index"
      >
        {{ item.name }} : {{ NODE_DEFAULT_TEXT.get(item.type) }}
      </div>
      <template #footer>
        <el-button type="primary" @click="errorDialogVisible = false">知道了</el-button>
      </template>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import ProcessNodeTree from '@/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue'
import { getBpmSimpleModel, updateBpmSimpleModel } from '@/api/bpm/simple'
import '@/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss'
import {
  NODE_DEFAULT_TEXT,
  NodeId,
  NodeType,
  SimpleFlowNode
} from '@/components/SimpleProcessDesignerV2/src/consts'
import { DsgnProcService } from '@/api/res/approval/DsgnProcService'
import { DsgnFormService } from '@/api/res/approval/DsgnFormService'
import { useApprovalDesignerStore } from '@/store/modules/dsgn/ApprovalDesigner'

import { stringify } from 'flatted'

defineOptions({
  name: 'ApprovalProcessDesigner'
})

const router = useRouter() // 路由
const props = defineProps({
  modelId: String
})
const message = useMessage() // 国际化
const processNodeTree = ref<SimpleFlowNode | undefined>()

// inject('dsgnFormService', getFormConfig=>{
//   debugger;
//   const formConfig = getFormConfig()
// })

const dsgnModelId = ref('')
const designerStore = useApprovalDesignerStore()
const errorDialogVisible = ref(false)
let errorNodes: SimpleFlowNode[] = []
const saveSimpleFlowModel = async (cb) => {
  const data = dsgnProcessService.getProcessConfig()
  if (data !== null && data !== undefined) {
    const result = await updateBpmSimpleModel(data)
    if (result) {
      message.success('修改成功')
      close()
    } else {
      message.alert('修改失败')
    }
  }
}

// 校验节点设置。 暂时以 showText 为空 未节点错误配置
const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNode[]) => {
  if (node) {
    const { type, showText, conditionNodes } = node
    if (type == NodeType.END_EVENT_NODE) {
      return
    }
    if (type == NodeType.START_USER_NODE) {
      validateNode(node.childNode, errorNodes)
    }

    if (type === NodeType.USER_TASK_NODE) {
      if (!showText) {
        errorNodes.push(node)
      }
      validateNode(node.childNode, errorNodes)
    }
    if (type === NodeType.COPY_TASK_NODE) {
      if (!showText) {
        errorNodes.push(node)
      }
      validateNode(node.childNode, errorNodes)
    }
    if (type === NodeType.CONDITION_NODE) {
      if (!showText) {
        errorNodes.push(node)
      }
      validateNode(node.childNode, errorNodes)
    }

    if (type == NodeType.CONDITION_BRANCH_NODE) {
      conditionNodes?.forEach((item) => {
        validateNode(item, errorNodes)
      })
      validateNode(node.childNode, errorNodes)
    }
  }
}

const close = () => {
  router.push({ path: '/bpm/manager/model' })
}
let scaleValue = ref(100)
const MAX_SCALE_VALUE = 200
const MIN_SCALE_VALUE = 50
// 放大
const zoomOut = () => {
  if (scaleValue.value == MAX_SCALE_VALUE) {
    return
  }
  scaleValue.value += 10
}
// 缩小
const zoomIn = () => {
  if (scaleValue.value == MIN_SCALE_VALUE) {
    return
  }
  scaleValue.value -= 10
}

onMounted(async () => {
  const procResult = designerStore.designerModel.proc
  dsgnModelId.value = procResult.configId
  if (procResult && procResult.configJson.value) {
    processNodeTree.value = procResult.configJson
  } else {
    const result = await getBpmSimpleModel(procResult.configId)
    if (result) {
      processNodeTree.value = result
    } else {
      // 初始值
      processNodeTree.value = {
        name: '发起人',
        type: NodeType.START_USER_NODE,
        id: NodeId.START_USER_NODE_ID,
        childNode: {
          id: NodeId.END_EVENT_NODE_ID,
          name: '结束',
          type: NodeType.END_EVENT_NODE
        }
      }
    }
  }
})

const dsgnProcessService: DsgnProcService = {
  getProcessConfig: (): any => {
    if (!dsgnModelId.value) {
      message.error('缺少模型 modelId 编号')
      return
    }
    errorNodes = []
    validateNode(processNodeTree.value, errorNodes)
    if (errorNodes.length > 0) {
      errorDialogVisible.value = true
      return
    }
    // const procVal = JSON.parse(JSON.stringify(  processNodeTree.value))

    return {
      id: dsgnModelId.value,
      simpleModel: processNodeTree.value
    }
  }
}

defineExpose({ dsgnProcessService })
</script>
